<template>
	<div class="list" id="list">
		
		<div class="listli" v-for="(item,i) in list">
			<div class="li" @click="lishows(i)">
				<div class="li-time">{{item.time}}</div>
				<div class="li-name">{{item.name}}</div>
			</div>
			<div class="lishow" v-if="lishow == i">{{item.content}}</div>
		</div>

	</div>
</template>


<script>
export default {
	  data () {
			return {
				lishow:-1,
				list: [
					{time:"正月三十",name:"惊蛰",content:"惊蛰，古称'启蛰'，是二十四节气中的第三个节气，标志着仲春时节的开始；太阳到达黄经345°时。"},
					{time:"二月十五",name:"春分",content:"春分也是节日和祭祀庆典，古代帝王有春天祭日，秋天祭月的礼制。周礼天子日坛祭日。"}
				]
			}
	  },
		methods:{
			lishows:function(i){
				if(this.lishow == i){
					this.lishow = -1
				}else{
					this.lishow = i;
				}
			}
		}
}
</script>

<style lang="scss">
	$color:red;
	*{ font-size: 10px;}
	#list{
		padding: 0.1rem;
		.listli{ background: rgba(255,255,255,0.6); font-size: 14px;  padding: 0.2rem 0.3rem; margin-bottom: 0.1rem;
			.li{ display: flex;
				.li-time{ flex: 1; color:$color;}
				.li-name{ flex: 1; text-align: right;}
			}
			.lishow{ padding-top: 20px; font-size: 12px; color: #333;}
		}
	}

	
	
	
</style>
